@charset "utf-8";

// container fun.less
.widthMargin() {
    width: 100%;
    margin: 0 auto;
}
// media
.media(@min-w, @max-w) {
    @media (min-width: @min-w) {
        .container {
            max-width: @max-w;
        }
    }
}

.container {
    .widthMargin();
}
.container-fluid {
    .widthMargin();
}
.media(@min-w: 576px, @max-w: 540px);
.media(@min-w: 768px, @max-w: 720px);
.media(@min-w: 992px, @max-w: 960px);
.media(@min-w: 1200px, @max-w: 1140px);


// row
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -7.5px;

    * {
        box-sizing: border-box;
    }
}
.no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

// col
.col,
.col-1, .col-xl-1, .col-lg-1, .col-md-1, .col-sm-1,
.col-2, .col-xl-2, .col-lg-2, .col-md-2, .col-sm-2,
.col-3, .col-xl-3, .col-lg-3, .col-md-3, .col-sm-3,
.col-4, .col-xl-4, .col-lg-4, .col-md-4, .col-sm-4,
.col-5, .col-xl-5, .col-lg-5, .col-md-5, .col-sm-5,
.col-6, .col-xl-6, .col-lg-6, .col-md-6, .col-sm-6,
.col-7, .col-xl-7, .col-lg-7, .col-md-7, .col-sm-7,
.col-8, .col-xl-8, .col-lg-8, .col-md-8, .col-sm-8,
.col-9, .col-xl-9, .col-lg-9, .col-md-9, .col-sm-9,
.col-10, .col-xl-10, .col-lg-10, .col-md-10, .col-sm-10,
.col-11, .col-xl-11, .col-lg-11, .col-md-11, .col-sm-11,
.col-12, .col-xl-12, .col-lg-12, .col-md-12, .col-sm-12 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding: 7.5px;
}

// col fun.less
.col(@class, @width) {
    &-@{class} {
        flex: 0 0 @width;
        max-width: @width;
    }
}
.colMedia(@min-width, @class) {
    @media (min-width: @min-width) {
        .col-@{class} {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;

            .col(1, 8.333333%);
            .col(2, 16.666667%);
            .col(3, 25%);
            .col(4, 33.333333%);
            .col(5, 41.666667%);
            .col(6, 50%);
            .col(7, 58.333333%);
            .col(8, 66.666667%);
            .col(9, 75%);
            .col(10, 83.333333%);
            .col(11, 91.666667%);
            .col(12, 100%);
        }
    }
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;

    .col(1, 8.333333%);
    .col(2, 16.666667%);
    .col(3, 25%);
    .col(4, 33.333333%);
    .col(5, 41.666667%);
    .col(6, 50%);
    .col(7, 58.333333%);
    .col(8, 66.666667%);
    .col(9, 75%);
    .col(10, 83.333333%);
    .col(11, 91.666667%);
    .col(12, 100%);
}
.colMedia(1200px, xl);
.colMedia(992px, lg);
.colMedia(768px, md);
.colMedia(576px, sm);
